<!-- 首页 -->
<template>
  <view style="width:100%; min-height: 100vh; padding-bottom: 60px;">
    <!-- 第一个图表 -->
    <l-echart ref="chartRef" @finished="initFirstChart"></l-echart>
    <!-- 第二个相同的图表 -->
    <l-echart ref="chartRef2" @finished="initSecondChart"></l-echart>
    <!-- 添加自定义导航栏 -->
    <custom-tab-bar/>
  </view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
	    data() {
	        return {
	            option: {
	                tooltip: {
	                    trigger: 'axis',
	                    axisPointer: {
	                        type: 'shadow' 
	                    },
	                    confine: true
	                },
	                legend: {
	                    data: ['热度', '正面', '负面']
	                },
	                grid: {
	                    left: 20,
	                    right: 20,
	                    bottom: 15,
	                    top: 40,
	                    containLabel: true
	                },
	                xAxis: [
	                    {
	                        type: 'value',
	                        axisLine: {
	                            lineStyle: {
	                                color: '#999999'
	                            }
	                        },
	                        axisLabel: {
	                            color: '#666666'
	                        }
	                    }
	                ],
	                yAxis: [
	                    {
	                        type: 'category',
	                        axisTick: { show: false },
	                        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
	                        axisLine: {
	                            lineStyle: {
	                                color: '#999999'
	                            }
	                        },
	                        axisLabel: {
	                            color: '#666666'
	                        }
	                    }
	                ],
	                series: [
	                    {
	                        name: '热度',
	                        type: 'bar',
	                        label: {
	                            normal: {
	                                show: true,
	                                position: 'inside'
	                            }
	                        },
	                        data: [300, 270, 340, 344, 300, 320, 310],
	                    },
	                    {
	                        name: '正面',
	                        type: 'bar',
	                        stack: '总量',
	                        label: {
	                            normal: {
	                                show: true
	                            }
	                        },
	                        data: [120, 102, 141, 174, 190, 250, 220]
	                    },
	                    {
	                        name: '负面',
	                        type: 'bar',
	                        stack: '总量',
	                        label: {
	                            normal: {
	                                show: true,
	                                position: 'left'
	                            }
	                        },
	                        data: [-20, -32, -21, -34, -90, -130, -110]
	                    }
	                ]
	            },
	        };
	    },
	    // 组件能被调用必须是组件的节点已经被渲染到页面上
	    methods: {
	        async initFirstChart() {
	            // chart 图表实例不能存在data里
	            const chart = await this.$refs.chartRef.init(echarts);
	            chart.setOption(this.option)
	        },
	        
	        async initSecondChart() {
	            // 初始化第二个图表，使用相同的配置选项
	            const chart = await this.$refs.chartRef2.init(echarts);
	            chart.setOption(this.option)
	        }
	    }
	}
</script>

<style>

</style>
